<template>
	<!--推荐阅读-->
	<div class="ui segments m-box">
		<div class="ui secondary segment" style="background: #17a2b8;" ><i class="bookmark icon" style="font-size: 1.2em;color: white;"></i><span style="font-size: 1.3rem;color: white;">随机阅读</span></div>
		<div class="ui segment" style="padding-left: 5px;padding-right: 5px;padding-bottom: 0;">
			<div class="ui divided items">
				<!-- <div class="item" v-for="blog in randomBlogList" :key="blog.id">
					<div class="content">
						<a href="javascript:;" @click.prevent="toBlog(blog)" class="header m-text-500">{{ blog.title }}</a>
						<div class="meta">
							<router-link :to="`/category/${blog.category.name}`">
								<i class="folder open icon"></i>{{ blog.category.name }}
							</router-link>
						</div>
						<div class="extra">
							<router-link :to="`/tag/${tag.name}`" class="ui label m-text-500" :class="tag.color" v-for="(tag,index) in blog.tags" :key="index">{{ tag.name }}</router-link>
							<a href="javascript:;" @click.prevent="toBlog(blog)" class="ui right floated">
								阅读全文<i class="angle double right icon"></i>
							</a>
						</div> -->
				  <div class="block">

				    <el-carousel  indicator-position="outside" height="110px" style="border-radius: 0.28571429rem;" arrow = "never" >
				      <el-carousel-item  v-for="blog in randomBlogList">
				        <div class="ui segment" style="border-radius: 0;height: 100%;border: 0;" :key="blog.id" @click.prevent="toBlog(blog)">
				          <h3 class="ui legt header" style="color: #303133;" >{{ blog.title }}</h3>
				          <div class="ui clearing divider date">{{ blog.createTime | dateFormat('YYYY-MM-DD') }}</div>
				          <!-- <div class="">{{ blog.category.name }}</div> -->
						  <p></p>
				        </div>
				      </el-carousel-item>
				    </el-carousel>
				  </div>
<!-- 				<div class="m-item" v-for="blog in randomBlogList" :key="blog.id" @click.prevent="toBlog(blog)">
					<div class="img" :style="{'background-image':'url(' + blog.firstPicture + ')'}"></div>
					<div class="ui segment">
					  <h3 class="ui legt floated header" style="color: #303133;" >{{ blog.title }}</h3>
					  <div class="ui clearing divider date">{{ blog.createTime | dateFormat('YYYY-MM-DD') }}</div>
					  <p></p>
					</div>
					
				</div> -->
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "RandomBlog",
		props: {
			randomBlogList: {
				type: Array,
				required: true
			},
		},
		methods: {
			toBlog(blog) {
				this.$store.dispatch('goBlogPage', blog)
			}
		}
	}
</script>

<style>
	.el-carousel__indicators--outside button {
	    background-color: #17a2b8 !important;
		border-radius: 0.3125rem !important;
	    height: 5px !important;
		/* margin: px; */
		
	}

	  
	  .el-carousel__item:nth-child(2n) {
	    background-color: #99a9bf;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
	    background-color: #d3dce6;
	  }
	.secondary.segment {
		padding: 15px;

	}

	.ui.divided.items .m-item:first-child {
		margin-top: 0;
	}

	.ui.divided.items .m-item {
		margin-top: 1rem;
		min-height: 7rem;
		
		position: relative;
		overflow: hidden;
		border-radius: 5px;
		cursor: pointer;
		user-select: none;
	}


	.ui.divided.items .date {
		padding-top:0.8rem;
		color: #909399;
	}


	.ui.divided.items .m-item .info {
		z-index: 1;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: .5rem !important;
		font-size: 12px;
		color: white;
	}
	.ui.divided.items .m-item .info .title {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		word-break: break-word;
	}
</style>